<!-- 用户新建、修改弹窗模板 -->
<template>
    <div class="reminder-dialog">
        <el-dialog
                :title="title"
                :visible.sync="isShow"
                @open="openCallback"
                @close="closeCallback"
                width="560px">
            <el-form @submit.native.prevent
                     size="small"
                     :model="form"
                     ref="form"
                     label-width="100px"
                     label-position="right"
                     :rules="rules">
                <el-form-item
                        :label="form[key].label"
                        :prop="key+'.value'"
                        v-for="(value,key) in form"
                        :key="key"
                        v-if="value.type !=='chore'">
                    <el-input
                            v-if="value.type === 'input'"
                            class="line-input"
                            :rows="3"
                            v-model="value.value"
                            :maxlength="value.maxlength"
                            :placeholder="value.placeholder" />
                    <el-input
                            v-if="value.type === 'textarea'"
                            class="line-input"
                            v-model="value.value"
                            :maxlength="value.maxlength"
                            :placeholder="value.placeholder" />
                    <el-select
                            v-if="value.type==='select'"
                            v-model="value.value"
                            :placeholder="value.placeholder">
                        <el-option
                                v-for="item in value.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <slot :form="form" name="expand"></slot>
            </el-form>
            <span slot="footer" class="dialog-footer operation submit-btn">
                <el-button type="info" size="small" @click="handleCancel">取消</el-button>
                <el-button type="primary" size="small" @click="handleConfirm">{{confirmText}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
    @Component()
    export default class DialogIntTemplate extends Vue {
        @Prop({
            default: '提示'
        }) title: string
        @Prop({
            default: '确认'
        }) confirmText: string
        @Prop({
            default: () => {}
        }) form
        @Prop({
            default: () => {}
        }) rules

        @Emit('confirm')
        confirm (form) {
            this.resetForm()
        }
        isShow: boolean = false
        postParams = {}
        toggleDialog (isShow: boolean) {
            this.isShow = isShow
        }
        openDialog (postParams) {
            this.postParams = postParams
            this.toggleDialog(true)
            this.$nextTick(() => {
                this.initForm(this.postParams)
            })
        }
        handleConfirm () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.confirm({...this.postParams, ...this.flatForm(this.form)})
                    this.toggleDialog(false)
                }
            })
        }
        handleCancel () {
            this.toggleDialog(false)
            this.resetForm()
        }
        flatForm (form) {
            let temp = {}
            for (let key in form) {
                if (form.hasOwnProperty(key)) {
                    temp[key] = form[key].value
                }
            }
            return temp
        }
        resetForm () {
            this.$refs.form.resetFields()
        }
        initForm (baseTemp) {
            for (let key in this.form) {
                if (this.form.hasOwnProperty(key) && baseTemp.hasOwnProperty(key)) {
                    this.form[key].value = baseTemp[key]
                }
            }
        }
        openCallback () {
        }
        closeCallback(){
            this.resetForm()
        }
    }
</script>

<style lang="scss" scoped>
    .operation {
        display: flex;
        justify-content: center;
    }
</style>